import React from 'react';
import {
  Row,
  Col,
  Form,
  Icon,
  Input,
  Button,
  Select,
  Tooltip,
  InputNumber,
  notification,
  AutoComplete
} from 'antd';
import { hashHistory } from 'dva/router';
import './CreateRefund_Qcp.less';
import axios from 'axios'
import intercept from '../../../utils/intercept';
import { config } from 'utils';
const FormItem = Form.Item;
const Option = Select.Option;


class CreateRefund extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
      autoCompleteResult: [],
      isCanEdit: false,
    };
  }

  componentDidMount() {
    const token = sessionStorage.getItem("token");
    axios
      .get(`${config.api}CustomService/GetOneOrder?orderCode=${this.props.location.query.sn}`, { headers: { Authorization: 'Bearer ' + token } })
      .then((data) => {
        var orderinfo = data.data.orderInfo;
        var refundinfo = data.data.refundInfo;
        this.setState({
          isCanEdit: data.data.isCanEdit
        })
        this
          .props
          .form
          .setFieldsValue({
            ordercode: orderinfo.sn,
            username: orderinfo.username,
            phone: orderinfo.userphone,
            amount: orderinfo.zzs,
            price: orderinfo.price1,
            dotime: orderinfo.dotime,
            totalmoney: orderinfo.zje,
            tradersn: orderinfo.tradersn,
            traderaccount: orderinfo.traderaccount,
            startandend: orderinfo.qczmc + "--" + orderinfo.target,
            paysn: orderinfo.paysn,
            status: refundinfo == null ? '0' : refundinfo.status + '',
            refundcontent: refundinfo == null ? '' : refundinfo.refundContent + '',
            refundaccount: refundinfo == null ? '原路退回' : refundinfo.refundAccount,
          });
      })
      .catch(err => {
        intercept;
      })
  };
  handleReset = () => {
    this
      .props
      .form
      .resetFields();
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this
      .props
      .form
      .validateFieldsAndScroll((err, values) => {
        if (!err) {
          //console.log('Received values of form: ', values);
          const token = sessionStorage.getItem("token");
          axios.post(`${config.api}CustomService/RefundApply`, { OrderCode: values.ordercode, Amount: values.amount, TotalPrice: values.totalmoney, RefundReason: values.refundcontent, RefundAccount: values.refundaccount, Status: values.status }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            //console.log("接口返回：",data);
            if (data.data.result) {
              this.openNotification("申请退款", "申请退款成功", "#108ee9");
              hashHistory.push(`/orderinfo?order=${values.ordercode}`);
            } else {
              this.openNotification("申请退款", data.data.errorMessage, "red"); 
            }
          })
          .catch(err => {
            intercept;
          })
        }
      });
  }
  openNotification = (title, desc, color) => {
    notification.open({
      message: title,
      description: desc,
      icon: <Icon type="smile-circle" style={{ color: color }} />,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const dataSource = ['断网', '自助机故障', '购票成功，预定失败', '车票状态已取消', '车站同意退款'];
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 6
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 14
        }
      }
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <Row>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  订单号
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('ordercode', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your ordercode!',
                    whitespace: true
                  }
                ]
              })(<Input disabled />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  会员账号
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your username!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  旅客手机
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('phone', {

                rules: [
                  {
                    required: true,
                    message: 'Please input your phone!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  张数
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('amount', {
                rules: [
                  {
                    required: true,
                    type: 'integer',
                    message: 'Please input your amount!',
                    whitespace: true
                  }
                ]
              })(<InputNumber className='inputwidth' />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  票价
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('price', {
                rules: [
                  {
                    required: true,
                    type: 'number',
                    step: 0.1,
                    precision: 2,
                    message: 'Please input your price!',
                    whitespace: true
                  }
                ]
              })(<InputNumber className='inputwidth' />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  购票时间
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('dotime', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your dotime!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  退款金额
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('totalmoney', {
                rules: [
                  {
                    required: true,
                    type: 'number',
                    step: 0.1,
                    precision: 2,
                    message: 'Please input your totalmoney!',
                    whitespace: true
                  }
                ]
              })(<InputNumber className='inputwidth' />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  退款原因
                <Tooltip title="What do you want other to call you?">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('refundcontent', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your refundcontent!',
                    whitespace: true
                  }
                ]
              })(<AutoComplete
                  dataSource={dataSource}
                  placeholder="请说明退款原因"
                  filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  分销商单号
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('tradersn', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your tradersn!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  分销商
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('traderaccount', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your traderaccount!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  退款账号
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('refundaccount', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your refundaccount!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  去向
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('startandend', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your startandend!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  支付流水号
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('paysn', {
                rules: [
                  {
                    required: false,
                    message: 'Please input your paysn!',
                    whitespace: true
                  }
                ]
              })(<Input />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={(
                <span>
                  退款状态
                <Tooltip title="自动填充">
                    <Icon type="question-circle-o" />
                  </Tooltip>
                </span>
              )}
              hasFeedback>
              {getFieldDecorator('status', {
                initialValue: '0',
                rules: [
                  {
                    required: true,
                    message: 'Please input your status!',
                    whitespace: true
                  }
                ]
              })(
                <Select>
                  <Option value="0">处理中</Option>
                  <Option value="1" disabled>已退款</Option>
                  <Option value="2">已撤销</Option>
                  <Option value="3">第三方已退款</Option>
                </Select>
                )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <FormItem className="center">
              <Button type="primary" disabled={!this.state.isCanEdit} htmlType="submit">提交退款</Button>{' '}
              <Button onClick={this.handleReset}>重置</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

const CreateRefund_Qcp = Form.create()(CreateRefund);
export default CreateRefund_Qcp